<template>
  <div class="layout-all">
    <div style="clear:both;"></div>
    <el-tree :highlight-current=true :data="tableData" :props="defaultProps" style="width:80%;">
       <div class="custom-tree-node flex_row" slot-scope="{ node, data }">
        <div class="tree_left flex_row">

          <div class="tree_item flex_row" >
              <el-tooltip class="item" effect="dark" :content="'ID: '+data.id" placement="top-start">
                <div>
                  <input class="input_item" type="text" placeholder="标题" v-model="form.title" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                  <div v-else @click.stop="">{{title_list[data.id] ? title_list[data.id] : data.title}}</div>
                </div>
              </el-tooltip>
          </div>
          <div class="tree_item flex_row"  v-if="data.icon!=undefined">
            <i @click.stop="" :class="data.icon" style="font-size: 40px"></i>
            <el-tooltip class="item" effect="dark" content="图标" placement="top-start">
              <div v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                <el-popover  placement="right" width="400" trigger="click">
                  <el-scrollbar style="height:300px;">
                    <el-button style="margin:4px;padding:5px;" v-for="item in options" :key="item" ><i @click="selectIcon($event,data)" :class="item" style="font-size:40px;"></i></el-button>
                  </el-scrollbar>
                  <el-button size="mini" slot="reference"><i class='el-icon-circle-plus'/></el-button>
                </el-popover>
                  
              </div>
            </el-tooltip>
            
          </div>
          <div class="tree_item flex_row" >
            <el-tooltip class="item" effect="dark" content="url路径" placement="top-start">
              <div>
                <input class="input_item" type="text" placeholder="url路径"  v-model="form.vue_url" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                  <div v-else @click.stop="">{{vue_url_list[data.id] ? vue_url_list[data.id] : data.vue_url}}</div>
              </div>
            </el-tooltip>
          </div>
           <!-- <div class="tree_item flex_row" style="width:250px;">
            <el-tooltip class="item" effect="dark" content="文件路径" placement="top-start">
              <div>
                <input class="input_item" type="text" placeholder="文件路径" v-model="form.vue_view" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                <div v-else @click.stop="">{{vue_view_list[data.id] ? vue_view_list[data.id] : data.vue_view}}</div>
              </div>
            </el-tooltip>
          </div> -->
         <div class="tree_item"  v-if="data.type!=undefined&&type_arr.length>0">

            <el-button :type="type_arr_style[data.type]" size="mini" @click.stop="changeStatus(data,'type' ,data.type)">{{type_arr[data.type]}}</el-button>

          </div>
          <div class="tree_item"  v-if="data.is_show!=undefined">
            <el-button type="primary" size="mini" v-if="data.is_show == 1" @click.stop="changeStatus(data,'is_show' ,data.is_show)">显示</el-button>
            <el-button type="danger" size="mini" v-else @click.stop="changeStatus(data,'is_show' ,data.is_show)">不显示</el-button>
          </div>

          <div class="tree_item"  v-if="data.is_default!=undefined">
            <el-button type="primary" size="mini" v-if="data.is_default == 1" @click.stop="changeStatus(data,'is_default' ,data.is_default)">默认授权</el-button>
            <el-button type="danger" size="mini" v-else @click.stop="changeStatus(data,'is_default' ,data.is_default)">默认不授权</el-button>
          </div>
           <div class="tree_item"  v-if="data.is_shop!=undefined">
            <el-button type="primary" size="mini" v-if="data.is_shop == 1" @click.stop="changeStatus(data,'is_shop' ,data.is_shop)">商户显示</el-button>
            <el-button type="danger" size="mini" v-else @click.stop="changeStatus(data,'is_shop' ,data.is_shop)">商户不显示</el-button>
          </div>
           <div class="tree_item flex_row" >
            <el-tooltip class="item" effect="dark" content="模块" placement="top-start">
              <div>
                <input class="input_item" type="text" placeholder="模块" v-model="form.module" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                <div v-else @click.stop="">{{vue_view_list[data.id] ? vue_view_list[data.id] : data.module}}</div>
              </div>
            </el-tooltip>
          </div>
          <div class="tree_item flex_row"  v-if="data.sort!=undefined">
            <el-tooltip class="item" effect="dark" content="排序" placement="top-start">
              <div>
                <input class="input_item" type="number" style="width:50px;" placeholder="排序" v-model="form.sort" v-if="data.$treeNodeId == treeNodeId" @click.stop="">
                <div v-else @click.stop="">{{sort_list[data.id] ? sort_list[data.id] : data.sort}}</div>
              </div>
            </el-tooltip>
          </div>

        </div>
        <div v-if="data.is_default!=undefined">
          <el-button type="success" icon="el-icon-check" circle @click.stop="onSubmit()"  v-if="data.$treeNodeId == treeNodeId"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click.stop="editItem(node,data)" ></el-button>
            <el-button type="danger" icon="el-icon-edit-outline" @click.stop="onEdit(data.id)" circle></el-button>
        </div>
      </div>

    </el-tree>
  </div>

</template>

<script>
let iconfont = require('../../assets/iconfont/iconfont.json')
export default {
  name:'menuList',
  props:{
    request_url:'',
    module:'',
  },
  data() {
    return {
      options: [],
      module_edit:'',
      treeNodeId:'',
      defaultProps: {
        children: 'child',
        label: 'title'
      },
      type_arr_style:['primary','danger','success','info'],

      tableData: [],
      type_arr: [],
      form :{
        title:'',
        icon:'',
        id:'',
        sort:'',
        vue_url:'',
      },
      thumb_list:{},
      title_list:{},
      sort_list:{},
      vue_view_list:{},
      vue_url_list:{},
      visible:true,
    }
  },
  mounted() {
    this.onSearch()

    this.font_family = iconfont.font_family
    this.css_prefix_text = iconfont.css_prefix_text
    iconfont.glyphs.forEach((item) => {
      
      this.options.push(this.font_family + ' ' + this.css_prefix_text + item.font_class)
    });

    this.module_edit='./form?id='
    console.log(this.module_edit)
  },
  methods: {
    selectIcon (event,data) {
      data.icon=event.currentTarget.className
      this.visible=false
      this.form.icon = event.currentTarget.className
    },
    editItem (node,data) {
      if (this.treeNodeId == data.$treeNodeId) {
        this.treeNodeId = ''
      } else {
        this.treeNodeId = data.$treeNodeId
        this.form.title = this.title_list[data.id] ? this.title_list[data.id] : data.title
        this.form.vue_url = this.vue_url_list[data.id] ? this.vue_url_list[data.id] : data.vue_url
        // this.form.vue_view = this.vue_view_list[data.id] ? this.vue_view_list[data.id] : data.vue_view
        this.form.module = this.vue_view_list[data.id] ? this.vue_view_list[data.id] : data.module
        this.form.icon = this.thumb_list[data.id] ? this.thumb_list[data.id] : data.icon
        this.form.sort = this.sort_list[data.id] ? this.sort_list[data.id] : data.sort
        this.form.id = data.id
      }

    },
    treeClick (a,b,c) {
        cosnole.log(a)
        cosnole.log(b)
        cosnole.log(c)
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    changeStatus(data, field, val) {
      const form = {}
      form.id = data.id
      form.field = field
      val === 1 ? form.val = 0 : form.val = 1
      this.get(this.request_url+'update', form, 'POST').then(e => {
        this.$msg_ok('success', '修改成功')
        data[field]=!data[field]

      })
      // this.update(id, val, field, 'AdminMenu').then(e => {
      //   e ? this.onSearch() : ''
      // })
    },
     onSubmit() {
      const form = this.form
      if (form.title === '') {
        this.$message({
            type: 'error',
            message: '请输入标题'
          })
          return
      }
      if (form.vue_url === '') {
        this.$message({
            type: 'error',
            message: '请填写url路径!'
          })
          return
      }
      if (form.sort === '') {
        this.$message({
            type: 'error',
            message: '请填写排序信息!'
          })
          return
      }
      form.module=this.module

      this.get(this.request_url+'save', form, 'POST').then(e => {
        this.vue.set(this.title_list, form.id, form.title)
        this.vue.set(this.sort_list, form.id, form.sort)
        this.vue.set(this.vue_url_list, form.id, form.vue_url)
        this.vue.set(this.vue_view_list, form.id, form.vue_view)
        this.treeNodeId = ''
      })
    },
    onSearch() {
      var url = this.request_url+'index'
      if (this.module == 'shop') {
        url = this.request_url+'index?module=shop'
      }
   
      this.get(url, this.form, 'POST').then(e => {
        let listmenu=[]
        for(let i in e.main_menu_arr){
          listmenu.push({id:e.main_menu_arr[i].id,title:e.main_menu_arr[i].title,child:[]})
          for(let j in e.list){
            if(listmenu[i].id==e.list[j].main_menu_id){
              listmenu[i].child.push(e.list[j])
            }
          }
        }
        this.tableData = listmenu
        if(e.type_arr)
        this.type_arr = e.type_arr
        // console.log(this.tableData)

        // this.per_page = e.list.per_page
        // this.total = e.list.total
        // this.current_page = e.list.current_page
      })
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      console.log(id)
      this.$emit('edit',id)
    },
    // 删除
    onDel(id) {
      this.$confirm('是否删除该记录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.get(this.request_url+'del?id=' + id, this.form, 'POST').then(e => {
          this.onSearch()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
.flex_row {
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.avatar-uploader {
  width:50px;
  height:50px;
}
.avatar-uploader .el-upload {
  width:50px;
  height:50px;
}
.el-upload--picture-card {
  height:50px;
  width:50px;
  line-height: 50px;
  text-align: center;
}
.el-upload--picture-card i {
  font-size:12px;
}
.tree_left {
  width:100%;
  justify-content: flex-start;
}
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.el-tree-node__label {
  font-size:16px !important;
}
.el-tree-node__content {
  height:60px;
}
.custom-tree-node {
  padding-right:20px;
  width:100%;
}
.tree_item {
  font-size:14px;
  width:15%;
  justify-content: flex-start;
}
.item_discription {
  color:#000;
  font-size:12px;
  margin-right:10px;
}
.input_item {
  width:120px;
}

</style>
